<template>
  <div class="basicQuest">
    <edit-form
      ref="basicQuestContainer"
      :inline="true"
      :editFormMap="basicQuestEditMap"
      :editFormData.sync="basicFormData"
      :editFormRule="basicQuestFormRule"
    ></edit-form>
    <el-dialog
      title="定向答题"
      :visible.sync="basicFormData.matchSwitchVisble"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <edit-form
        ref="directedQuestContainer"
        :inline="true"
        :editFormMap="directedQuestEditMap"
        :editFormData.sync="questionDirect"
        style="margin-right: 20px"
      ></edit-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelMatchSwitch">取 消</el-button>
        <el-button type="primary" @click="submitMatchSwitch">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getDataSource } from '@/static/js/dataSource';
import answerOption from './answerOption';
import cloneDeep from 'lodash/cloneDeep';
export default {
  // 基础题型表单
  name: 'BasicQuest',
  components: {
    answerOption,
  },
  props: {
    type: {
      type: String,
      default: 'gt'
    },
    basicForm: {
      type: Object,
      default: () => {},
    },
    questionDirect: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    basicQuestEditMap() {
      const bdAddMap = getDataSource('editForm', 'bdQuestEditMap');
      const basicQuestEditMap = getDataSource('editForm', 'basicQuestEditMap');
      const ignoreMap = {
        bd: ['isDirectional', 'matchSwitchVisble', 'isContradiction', 'matchSwitch', 'requiredQuestionsId'],
        yxd: ['isDirectional', 'matchSwitchVisble', 'isContradiction', 'matchSwitch', 'requiredQuestionsId'],
        jd: ['matchSwitch', 'isContradiction', 'requiredQuestionsId'],
      };
      let handleEditMap = basicQuestEditMap.filter((item) => !(ignoreMap[this.type] || []).includes(item.prop));
      if (this.type === 'bd') handleEditMap = handleEditMap.concat(bdAddMap);
      return handleEditMap;
    },
    basicQuestFormRule() {
      return getDataSource('editRule', 'basicQuestFormRule');
    },
    directedQuestEditMap() {
      return getDataSource('editForm', 'directedQuestEditMap');
    },
  },
  watch: {
    basicForm: {
      handler(val) {
        this.basicFormData = cloneDeep(val);
        this.clearValidate();
      },
      deep: true,
      immediate: true,
    },
    questionDirect: {
      handler(val) {
        this.basicQuestionDirect = cloneDeep(val);
        this.clearValidate();
      },
      deep: true,
      immediate: true,
    },
    basicFormData: {
      handler(val) {
        this.$emit('update:basicFormData', val);
        this.$emit('changeBasicData', val);
      },
      deep: true,
    },
    basicQuestionDirect: {
      handler(val) {
        this.$emit('update:basicQuestionDirect', val);
        this.$emit('changeDirect', val);
      },
      deep: true,
    },
  },
  data() {
    return {
      basicFormData: {},
      //   定向答题
      basicQuestionDirect: {},
    };
  },
  mounted() {
    this.clearValidate();
  },
  methods: {
    clearValidate() {
      this.$nextTick(() => {
        const basicQuestContainer = this.$refs.basicQuestContainer;
        basicQuestContainer.$refs.editFormData.clearValidate();
        const directedQuestContainer = this.$refs.directedQuestContainer;
        if (directedQuestContainer) directedQuestContainer.$refs.editFormData.clearValidate();
      });
    },
    cancelMatchSwitch() {
      this.basicQuestionDirect = {};
      this.$set(this.basicFormData, 'matchSwitchVisble', false);
    },
    submitMatchSwitch() {
      this.$set(this.basicFormData, 'matchSwitchVisble', false);
    },
  },
};
</script>
<style lang="scss" scoped>
.basicQuest {
}
</style>
